CSS કન્ટેનર ક્વેરી પ્રકારને સમજવું: રિસ્પોન્સિવ ડિઝાઇન માટે કન્ટેનર ક્વેરી વર્ગીકરણ

રિસ્પોન્સિવ વેબ ડિઝાઇન વર્ષોથી નોંધપાત્ર રીતે વિકસિત થઈ છે. શરૂઆતમાં, અમે અમારી વેબસાઇટ્સને વિવિધ સ્ક્રીન સાઇઝમાં અનુકૂલિત કરવા માટે મીડિયા ક્વેરીઝ પર ખૂબ આધાર રાખતા હતા. જોકે, જેમ જેમ વેબ એપ્લિકેશન્સ વધુ જટિલ બનતી ગઈ, તેમ તેમ મીડિયા ક્વેરીઝની મર્યાદાઓ સ્પષ્ટ થઈ. આના ઉપાય તરીકે CSS કન્ટેનર ક્વેરીઝ આવી, જે CSS સ્પેસિફિકેશનનો એક શક્તિશાળી ઉમેરો છે જે ડેવલપર્સને વ્યૂપોર્ટને બદલે તેમના કન્ટેનિંગ એલિમેન્ટના કદ અથવા સ્થિતિના આધારે એલિમેન્ટ્સને સ્ટાઇલ કરવાની મંજૂરી આપે છે. આ વધુ લવચીકતા અને કમ્પોનન્ટ-લેવલ રિસ્પોન્સિવનેસ પ્રદાન કરે છે.

કન્ટેનર ક્વેરીઝ શું છે?

મૂળભૂત રીતે, કન્ટેનર ક્વેરીઝ તમને પેરન્ટ કન્ટેનરના કદ અથવા સ્ટાઇલના આધારે CSS સ્ટાઇલ્સ લાગુ કરવાની મંજૂરી આપે છે. એવી પરિસ્થિતિની કલ્પના કરો જ્યાં તમારી પાસે એક કાર્ડ કમ્પોનન્ટ છે જેને સાઇડબાર અથવા મુખ્ય કન્ટેન્ટ એરિયામાં ઉપલબ્ધ જગ્યાના આધારે તેના લેઆઉટને અનુકૂલિત કરવાની જરૂર છે. કન્ટેનર ક્વેરીઝ જટિલ JavaScript સોલ્યુશન્સનો આશરો લીધા વિના આ શક્ય બનાવે છે.

કન્ટેનર ક્વેરીઝના બે મુખ્ય પ્રકારો છે:

• સાઇઝ કન્ટેનર ક્વેરીઝ: આ કન્ટેનરના પરિમાણો (પહોળાઈ અને ઊંચાઈ) પર ક્વેરી કરે છે.
• સ્ટેટ કન્ટેનર ક્વેરીઝ: આ કન્ટેનરની સ્ટાઇલ અથવા સ્થિતિ પર ક્વેરી કરે છે.

આ બ્લોગ પોસ્ટ કન્ટેનર ક્વેરી વર્ગીકરણ પર ધ્યાન કેન્દ્રિત કરશે, જે સાઇઝ કન્ટેનર ક્વેરીઝનું મુખ્ય પાસું છે.

કન્ટેનર ક્વેરી વર્ગીકરણ: મૂળભૂત બાબતોને સમજવી

કન્ટેનર ક્વેરી વર્ગીકરણ આપણને ચોક્કસ સાઇઝ ફીચર્સને નામવાળા કન્ટેનર પ્રકારો તરીકે વ્યાખ્યાયિત કરીને સાઇઝ-આધારિત કન્ટેનર ક્વેરીઝને સુવ્યવસ્થિત કરવામાં મદદ કરે છે. વારંવાર સમાન `min-width` અને `max-width` શરતો લખવાને બદલે, આપણે ફરીથી વાપરી શકાય તેવા કન્ટેનર પ્રકારો બનાવી શકીએ છીએ. આનાથી સ્વચ્છ, વધુ જાળવણી યોગ્ય અને વધુ વાંચી શકાય તેવો કોડ બને છે.

`@container` નિયમનો ઉપયોગ કન્ટેનર ક્વેરીઝને વ્યાખ્યાયિત કરવા અને લાગુ કરવા માટે થાય છે. મુખ્ય સિન્ટેક્સમાં કન્ટેનરનું નામ, કન્ટેનરનો પ્રકાર અને જ્યારે કન્ટેનર ઉલ્લેખિત શરતો સાથે મેળ ખાય ત્યારે લાગુ થવી જોઈએ તેવી સ્ટાઇલ્સનો ઉલ્લેખ કરવાનો સમાવેશ થાય છે.

કન્ટેનર ક્વેરી વર્ગીકરણના મુખ્ય ઘટકો

• કન્ટેનરનું નામ: તમે `container-name` CSS પ્રોપર્ટીનો ઉપયોગ કરીને કન્ટેનર એલિમેન્ટને આપો છો તે નામ. આ નામનો ઉપયોગ `@container` નિયમમાં કન્ટેનરને ટાર્ગેટ કરવા માટે થાય છે. તે એક ઓળખકર્તા તરીકે કાર્ય કરે છે.
• કન્ટેનરનો પ્રકાર: કન્ટેનરનો પ્રકાર સ્પષ્ટ કરે છે. આ બ્રાઉઝરને જણાવે છે કે ક્વેરી માટે કયા પરિમાણોનો ઉપયોગ કરવો અને કન્ટેનમેન્ટ કેવી રીતે સ્થાપિત કરવું. સામાન્ય મૂલ્યો `size`, `inline-size`, `block-size` અને `normal` છે.
• કન્ટેનર ક્વેરીની શરતો: આ તે શરતો છે જે `@container` નિયમની અંદરની સ્ટાઇલ્સ લાગુ કરવા માટે પૂરી થવી જોઈએ. આ શરતોમાં સામાન્ય રીતે કન્ટેનરના પરિમાણોની તપાસનો સમાવેશ થાય છે.
• સ્ટાઇલ્સ: જ્યારે કન્ટેનર ક્વેરીની શરતો પૂરી થાય ત્યારે લાગુ થતા CSS નિયમો.

ઊંડાણમાં ઉતરવું: કન્ટેનર પ્રકારો અને તેમની અસરો

`container-type` પ્રોપર્ટી કન્ટેનમેન્ટ સ્થાપિત કરવા અને જે અક્ષો સાથે કન્ટેનરની ક્વેરી કરવામાં આવશે તેને વ્યાખ્યાયિત કરવા માટે નિર્ણાયક છે. ચાલો તે લઈ શકે તેવા વિવિધ મૂલ્યોનું અન્વેષણ કરીએ:

• `size`: આ મૂલ્ય ઇનલાઇન અને બ્લોક બંને અક્ષો પર સાઇઝ કન્ટેનમેન્ટ સ્થાપિત કરે છે. આનો અર્થ એ છે કે કન્ટેનરની પહોળાઈ અને ઊંચાઈ ક્વેરી માટે ઉપયોગમાં લેવાશે. સામાન્ય હેતુના કન્ટેનર ક્વેરીઝ માટે આ ઘણીવાર સૌથી યોગ્ય પસંદગી છે.
• `inline-size`: આ ફક્ત ઇનલાઇન અક્ષ (સામાન્ય રીતે પહોળાઈ) પર સાઇઝ કન્ટેનમેન્ટ સ્થાપિત કરે છે. આ ઉપયોગી છે જ્યારે તમારે ફક્ત કન્ટેનરની પહોળાઈમાં થતા ફેરફારો પર પ્રતિક્રિયા આપવાની જરૂર હોય.
• `block-size`: આ ફક્ત બ્લોક અક્ષ (સામાન્ય રીતે ઊંચાઈ) પર સાઇઝ કન્ટેનમેન્ટ સ્થાપિત કરે છે. આ ઉપયોગી છે જ્યારે તમારે ફક્ત કન્ટેનરની ઊંચાઈમાં થતા ફેરફારો પર પ્રતિક્રિયા આપવાની જરૂર હોય.
• `normal`: આ ડિફોલ્ટ મૂલ્ય છે. તે કન્ટેનમેન્ટ સ્થાપિત કરતું નથી, જેનો અર્થ છે કે કન્ટેનર ક્વેરીઝ એલિમેન્ટ પર લાગુ થશે નહીં.

કન્ટેનર ક્વેરી વર્ગીકરણના વ્યવહારુ ઉદાહરણો

ચાલો કેટલાક વ્યવહારુ ઉદાહરણો સાથે સમજીએ કે કન્ટેનર ક્વેરી વર્ગીકરણ કેવી રીતે કાર્ય કરે છે.

ઉદાહરણ 1: અનુકૂલનશીલ લેઆઉટ સાથેનું કાર્ડ કમ્પોનન્ટ

એક કાર્ડ કમ્પોનન્ટની કલ્પના કરો જેણે તેની પહોળાઈના આધારે તેની સામગ્રીને અલગ રીતે પ્રદર્શિત કરવાની જરૂર છે. જ્યારે કાર્ડ સાંકડું હોય, ત્યારે આપણે ઇમેજ અને ટેક્સ્ટને ઊભી રીતે સ્ટેક કરવા માંગીએ છીએ. જ્યારે કાર્ડ પહોળું હોય, ત્યારે આપણે તેમને બાજુ-બાજુ પ્રદર્શિત કરવા માંગીએ છીએ.

HTML:

            <div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>Card description goes here.</p>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

CSS:

            .card-container {
  container-name: card;
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.card img {
  width: 100%;
  margin-bottom: 10px;
}

@container card (min-width: 300px) {
  .card {
    flex-direction: row;
  }

  .card img {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 0;
  }
}

            

              
                Copy
              
            
          

સમજૂતી:

• અમે `card-container` એલિમેન્ટ પર `container-name: card` અને `container-type: inline-size` સેટ કર્યું છે. આ તેને "card" નામનું કન્ટેનર બનાવે છે જે તેની ઇનલાઇન સાઇઝ (પહોળાઈ) માં થતા ફેરફારો પર પ્રતિક્રિયા આપે છે.
• `@container card (min-width: 300px)` નિયમ ત્યારે જ સ્ટાઇલ્સ લાગુ કરે છે જ્યારે કન્ટેનરની પહોળાઈ ઓછામાં ઓછી 300 પિક્સેલ્સ હોય.
• `@container` નિયમની અંદર, અમે કાર્ડની `flex-direction` ને `row` માં બદલીએ છીએ, જે ઇમેજ અને ટેક્સ્ટને બાજુ-બાજુ પ્રદર્શિત કરે છે.

ઉદાહરણ 2: અનુકૂલનશીલ નેવિગેશન બાર

એક નેવિગેશન બારનો વિચાર કરો જેણે ઉપલબ્ધ પહોળાઈના આધારે અલગ રીતે પ્રદર્શિત થવાની જરૂર છે. જ્યારે જગ્યા મર્યાદિત હોય, ત્યારે તે હેમબર્ગર મેનૂમાં સંકોચાઈ જાય છે.

HTML:

            <nav class="nav-container">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="hamburger-menu">≡</button>
</nav>
            

              
                Copy
              
            
          

CSS:

            .nav-container {
  container-name: nav;
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin-right: 20px;
}

.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

@container nav (max-width: 500px) {
  .nav-list {
    display: none;
  }

  .hamburger-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

સમજૂતી:

• અમે `nav-container` એલિમેન્ટ પર `container-name: nav` અને `container-type: inline-size` સેટ કર્યું છે.
• `@container nav (max-width: 500px)` નિયમ ત્યારે સ્ટાઇલ્સ લાગુ કરે છે જ્યારે કન્ટેનરની પહોળાઈ 500 પિક્સેલ્સ અથવા તેનાથી ઓછી હોય.
• `@container` નિયમની અંદર, અમે નેવિગેશન લિસ્ટને છુપાવીએ છીએ અને હેમબર્ગર મેનૂ પ્રદર્શિત કરીએ છીએ.

એડવાન્સ્ડ કન્ટેનર ક્વેરી ટેકનિક્સ

કન્ટેનર ક્વેરી યુનિટ્સનો ઉપયોગ કરવો

કન્ટેનર ક્વેરી યુનિટ્સ (`cqw`, `cqh`, `cqi`, `cqb`) સાપેક્ષ એકમો છે જે કન્ટેનરના કદ પર આધારિત છે. તેઓ ફ્લુઇડ લેઆઉટ્સ બનાવવા માટે એક શક્તિશાળી રીત પ્રદાન કરે છે જે કન્ટેનરના પરિમાણોને અનુકૂલિત થાય છે. આ વ્યૂપોર્ટ યુનિટ્સ (vw, vh) જેવા જ છે પરંતુ વ્યૂપોર્ટને બદલે કન્ટેનરના કદના સાપેક્ષ છે.

• `cqw`: કન્ટેનરની પહોળાઈનો 1%.
• `cqh`: કન્ટેનરની ઊંચાઈનો 1%.
• `cqi`: કન્ટેનરની ઇનલાઇન સાઇઝનો 1% (હોરિઝોન્ટલ રાઇટિંગ મોડમાં પહોળાઈ).
• `cqb`: કન્ટેનરની બ્લોક સાઇઝનો 1% (હોરિઝોન્ટલ રાઇટિંગ મોડમાં ઊંચાઈ).

ઉદાહરણ:

            .element {
  font-size: 2cqw;
  padding: 1cqb;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, ફોન્ટ સાઇઝ કન્ટેનરની પહોળાઈના 2% હશે, અને પેડિંગ કન્ટેનરની ઊંચાઈના 1% હશે.

કન્ટેનર ક્વેરીઝને મીડિયા ક્વેરીઝ સાથે જોડવું

કન્ટેનર ક્વેરીઝ અને મીડિયા ક્વેરીઝનો ઉપયોગ વધુ જટિલ રિસ્પોન્સિવ ડિઝાઇન બનાવવા માટે એકસાથે કરી શકાય છે. ઉદાહરણ તરીકે, તમે પેજના એકંદર લેઆઉટને નિયંત્રિત કરવા માટે મીડિયા ક્વેરીઝનો ઉપયોગ કરી શકો છો અને તે લેઆઉટની અંદરના વ્યક્તિગત કમ્પોનન્ટ્સને અનુકૂલિત કરવા માટે કન્ટેનર ક્વેરીઝનો ઉપયોગ કરી શકો છો. આ સંયોજન વૈશ્વિક અને સ્થાનિક બંને રિસ્પોન્સિવનેસ માટે પરવાનગી આપે છે.

શેડો DOM સાથે કામ કરવું

કન્ટેનર ક્વેરીઝ શેડો DOM ની અંદર સારી રીતે કામ કરે છે, જે તમને એન્કેપ્સ્યુલેટેડ, ફરીથી વાપરી શકાય તેવા કમ્પોનન્ટ્સ બનાવવા દે છે જે તેમના કન્ટેનરના કદને પ્રતિભાવ આપે છે. આ ખાસ કરીને જટિલ વેબ એપ્લિકેશન્સ માટે ઉપયોગી છે જે કમ્પોનન્ટ-આધારિત આર્કિટેક્ચર પર ખૂબ આધાર રાખે છે.

કન્ટેનર ક્વેરીઝનો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

• મોબાઇલ-ફર્સ્ટ અભિગમથી પ્રારંભ કરો: તમારા કમ્પોનન્ટ્સને પહેલા સૌથી નાના કન્ટેનર સાઇઝ માટે ડિઝાઇન કરો અને પછી જેમ જેમ કન્ટેનર મોટું થાય તેમ તેમ તેમને ક્રમશઃ વધારો.
• અર્થપૂર્ણ કન્ટેનર નામોનો ઉપયોગ કરો: વર્ણનાત્મક કન્ટેનર નામો પસંદ કરો જે કન્ટેનરના હેતુને પ્રતિબિંબિત કરે. આ તમારા કોડને વધુ વાંચનીય અને જાળવણી યોગ્ય બનાવશે.
• અતિશય જટિલ ક્વેરીઝ ટાળો: તમારી કન્ટેનર ક્વેરીની શરતોને શક્ય તેટલી સરળ રાખો. અતિશય જટિલ ક્વેરીઝ તમારા કોડને સમજવા અને ડિબગ કરવામાં મુશ્કેલ બનાવી શકે છે.
• સંપૂર્ણપણે પરીક્ષણ કરો: તમારા કમ્પોનન્ટ્સને વિવિધ કન્ટેનર સાઇઝમાં પરીક્ષણ કરો જેથી ખાતરી થાય કે તેઓ રિસ્પોન્સિવ છે અને યોગ્ય રીતે અનુકૂલિત થાય છે. વિવિધ કન્ટેનર સાઇઝનું અનુકરણ કરવા માટે બ્રાઉઝર ડેવલપર ટૂલ્સનો ઉપયોગ કરો.
• પ્રદર્શનને ધ્યાનમાં લો: જ્યારે કન્ટેનર ક્વેરીઝ નોંધપાત્ર ફાયદાઓ પ્રદાન કરે છે, ત્યારે પ્રદર્શન પ્રત્યે સજાગ રહેવું મહત્વપૂર્ણ છે. તમારી કન્ટેનર ક્વેરીઝની અંદર અતિશય જટિલ સ્ટાઇલ્સ ટાળો, કારણ કે તે રેન્ડરિંગ પ્રદર્શનને અસર કરી શકે છે. જરૂર મુજબ બેન્ચમાર્ક અને ઑપ્ટિમાઇઝ કરો.
• તમારા કમ્પોનન્ટ્સનું દસ્તાવેજીકરણ કરો: જેમ કે કન્ટેનર ક્વેરીઝ કમ્પોનન્ટ ડિઝાઇનમાં જટિલતાનું એક સ્તર ઉમેરે છે, ભવિષ્યમાં સરળ જાળવણી માટે વિવિધ કન્ટેનર સાઇઝમાં અપેક્ષિત વર્તનનું દસ્તાવેજીકરણ કરવાની ખાતરી કરો.

કન્ટેનર ક્વેરીઝ માટે બ્રાઉઝર સપોર્ટ

કન્ટેનર ક્વેરીઝ માટે બ્રાઉઝર સપોર્ટ ઝડપથી વધી રહ્યો છે. મોટાભાગના આધુનિક બ્રાઉઝર્સ, જેમાં Chrome, Firefox, Safari, અને Edge નો સમાવેશ થાય છે, હવે કન્ટેનર ક્વેરીઝને સપોર્ટ કરે છે. તમારા લક્ષ્ય પ્રેક્ષકો કન્ટેનર ક્વેરીઝના લાભોનો અનુભવ કરી શકે તેની ખાતરી કરવા માટે "Can I use" જેવી વેબસાઇટ્સ પર નવીનતમ બ્રાઉઝર સુસંગતતા માહિતી હંમેશા તપાસો.

જો તમારે જૂના બ્રાઉઝર્સને સપોર્ટ કરવાની જરૂર હોય, તો તમે સુસંગતતા પ્રદાન કરવા માટે પોલીફિલ્સનો ઉપયોગ કરી શકો છો. જોકે, ધ્યાન રાખો કે પોલીફિલ્સ ઓવરહેડ ઉમેરી શકે છે અને મૂળ કન્ટેનર ક્વેરીઝના વર્તનને સંપૂર્ણપણે નકલ કરી શકશે નહીં.

કન્ટેનર ક્વેરીઝ સાથે રિસ્પોન્સિવ ડિઝાઇનનું ભવિષ્ય

કન્ટેનર ક્વેરીઝ રિસ્પોન્સિવ વેબ ડિઝાઇનમાં એક મહત્વપૂર્ણ પગલું રજૂ કરે છે. તે ડેવલપર્સને વધુ લવચીક, જાળવણી યોગ્ય અને કમ્પોનન્ટ-આધારિત વેબસાઇટ્સ બનાવવા માટે સશક્ત બનાવે છે. જેમ જેમ બ્રાઉઝર સપોર્ટ સુધરતો રહેશે, તેમ તેમ કન્ટેનર ક્વેરીઝ આધુનિક વેબ એપ્લિકેશન્સ બનાવવા માટે એક વધુને વધુ આવશ્યક સાધન બનશે.

અમલીકરણ માટે વૈશ્વિક વિચારણાઓ

વૈશ્વિક પ્રેક્ષકો માટે કન્ટેનર ક્વેરીઝનો અમલ કરતી વખતે, આ મુદ્દાઓ ધ્યાનમાં લો:

• સ્થાનિકીકરણ અને આંતરરાષ્ટ્રીયકરણ (l10n અને i18n): ભાષાઓ વચ્ચે ટેક્સ્ટની લંબાઈ નોંધપાત્ર રીતે બદલાય છે. કન્ટેનર ક્વેરીઝ ખાતરી કરે છે કે એલિમેન્ટ્સ કન્ટેનરની અંદર વિવિધ ટેક્સ્ટ સાઇઝને અનુકૂલિત થાય છે, ઓવરફ્લો અને લેઆઉટ બ્રેક્સને અટકાવે છે.
• જમણે-થી-ડાબે (RTL) ભાષાઓ: કન્ટેનર ક્વેરીઝ આપમેળે RTL લેઆઉટ્સને હેન્ડલ કરે છે. ઉદાહરણ તરીકે, જો તમારા કાર્ડ કમ્પોનન્ટને અરબી અથવા હીબ્રુ માટે ઇમેજ અને ટેક્સ્ટની સ્થિતિ બદલવાની જરૂર હોય, તો કન્ટેનર ક્વેરીઝ તે મુજબ ગોઠવશે. સંપૂર્ણ RTL સપોર્ટ માટે તમારે લોજિકલ પ્રોપર્ટીઝ (દા.ત., `margin-inline-start`) નો ઉપયોગ કરવાની જરૂર પડી શકે છે.
• સાંસ્કૃતિક ડિઝાઇન પસંદગીઓ: જ્યારે મૂળભૂત તર્ક સમાન રહે છે, ત્યારે સાંસ્કૃતિક ડિઝાઇન પસંદગીઓ પ્રત્યે સજાગ રહો. ધ્યાનમાં લો કે વિવિધ સંસ્કૃતિઓમાં વિવિધ લેઆઉટ્સ અને દ્રશ્ય તત્વોને કેવી રીતે જોવામાં આવી શકે છે. કેટલાક પ્રદેશોમાં મિનિમાલિસ્ટ ડિઝાઇન વધુ પસંદ કરી શકાય છે, જ્યારે અન્યમાં વધુ દ્રશ્ય રીતે સમૃદ્ધ ડિઝાઇન પસંદ કરી શકાય છે.
• ઍક્સેસિબિલિટી: ખાતરી કરો કે તમારો કન્ટેનર ક્વેરીઝનો ઉપયોગ ઍક્સેસિબિલિટીને નકારાત્મક રીતે અસર કરતો નથી. ઉદાહરણ તરીકે, ખાતરી કરો કે ટેક્સ્ટ વાંચી શકાય તેવું રહે અને ઇન્ટરેક્ટિવ એલિમેન્ટ્સ બધી કન્ટેનર સાઇઝ પર સરળતાથી સુલભ હોય.

નિષ્કર્ષ

કન્ટેનર ક્વેરી વર્ગીકરણ એક શક્તિશાળી સાધન છે જે તમારી રિસ્પોન્સિવ વેબ ડિઝાઇનની લવચીકતા અને જાળવણીક્ષમતામાં ઘણો સુધારો કરી શકે છે. વિવિધ કન્ટેનર પ્રકારો અને તેનો અસરકારક રીતે ઉપયોગ કેવી રીતે કરવો તે સમજીને, તમે એવા કમ્પોનન્ટ્સ બનાવી શકો છો જે તેમના પર્યાવરણને એકીકૃત રીતે અનુકૂલિત કરે છે, જે ઉપકરણો અને સ્ક્રીન સાઇઝની વિશાળ શ્રેણીમાં વધુ સારો વપરાશકર્તા અનુભવ પ્રદાન કરે છે. કન્ટેનર ક્વેરીઝને અપનાવો અને તમારા વેબ લેઆઉટ્સ પર નિયંત્રણનું એક નવું સ્તર અનલૉક કરો!